<!DOCTYPE html>
<!-- Copyright (c) 2016-2018 Haiku. All rights reserved. -->
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{demo}} | Vanilla JavaScript | Haiku Core</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    .mount {
      border: 1px solid black;
      height: 600px;
    }
    {{{style}}}
  </style>
  <script src="/webpack/{{demo}}.dom.js"></script>
  <script src="/webpack/{{demo}}.reactDom.js"></script>
  <script src="/webpack/{{demo}}.vueDom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
  <div class="container">
    <p><a href="/">&laquo; Back to demos</a></p>

    <h1>{{demo}} | Haiku Core</h1>

    <p>{{{note}}}</p>

    <div class="row">
      <div class="col-md-4">
        <h2>vanilla</h2>
        {{{before}}}
        <div class="mount" id="dom-mount"></div>
        {{{after}}}
      </div>
      <div class="col-md-4">
        <h2>react</h2>
        {{{before}}}
        <div class="mount" id="react-dom-mount"></div>
        {{{after}}}
      </div>
      <div class="col-md-4">
        <h2>vue</h2>
        {{{before}}}
        <div class="mount">
          <div id="vue-dom-mount"></div>
        </div>
        {{{after}}}
      </div>
     </div>
    </div>
  </div>

  <script>
    const domMount = document.getElementById('dom-mount');
    dom.mount ? dom.mount(domMount) : dom(domMount);

    const queryString = window.location.href.split('?')[1];
    const doSkipFrameworks = queryString && queryString.match(/dom-only=1/);

    if (!doSkipFrameworks) {
      const reactDomMount = document.getElementById('react-dom-mount');
      reactDom.mount
        ? reactDom.mount(reactDomMount, reactDom.React, reactDom.ReactDOM)
        : reactDom.ReactDOM.render(reactDom.React.createElement(reactDom), reactDomMount);

      new Vue({
        el: '#vue-dom-mount',
        template: `<{{demo}}></{{demo}}>`,
        components: {
          '{{demo}}': vueDom
        }
      });
    }
  </script>
</body>
</html>
